import { getWorkshopList } from "@/apis/advertising/account";
import {
  Card,
  Form,
  Grid,
  DatePicker,
  Space,
  Button,
  Table,
  Modal,
  InputNumber,
  Divider,
  Input,
  Select,
} from "@arco-design/web-react";
import { IconPlus, IconRefresh, IconUser } from "@arco-design/web-react/icon";
import { IconSearch } from "@arco-design/web-react/icon";
import { useEffect, useState } from "react";
const { Row, Col } = Grid;
type AddFormType = {
  date: string;
  water: number;
  electricity: number;
  gas: number;
};
type QueryFormType = {
  date: string;
  energyType: number;
};
export default function Index() {
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [addForm] = Form.useForm<AddFormType>();
  const [queryForm] = Form.useForm<QueryFormType>();
  const [data, setData] = useState([]);
  useEffect(() => {
    // getWorkshopList().then((res) => {
    //   const data = res.map((item) => {
    //     return {
    //       date: dayjs(item.date).format("YYYY-MM-DD"),
    //       COD_val: parseFloat(item.COD_val).toFixed(1),
    //       allow_pollution: parseFloat(item.allow_pollution).toFixed(1),
    //       dye_pollution_water: parseFloat(item.dye_pollution_water).toFixed(1),
    //       print_pollution_water: parseFloat(item.print_pollution_water).toFixed(
    //         1
    //       ),
    //       total_pollution: parseFloat(item.total_pollution).toFixed(1),
    //     };
    //   });
    //   setData(data);
    // });
    setData([{
        userId:1,
        username: 'zhangsan',
        status: 1,
        role: 'admin',
    }])
  }, []);
  const handleDetial = (item, type?: string) => {
    console.log(item, type);
  };
  const handleDelete = (item) => {
    console.log(item);
  };
  const handleSubmitQuery = () => {
    try {
      queryForm.validate();
      console.log(queryForm.getFields());
    } catch (error) {
      console.log(error);
    }
  };
  const handleSubmitAdd = async () => {
    try {
      await addForm.validate();
      console.log(addForm.getFields());
    } catch (error) {
      console.log(error);
    }
  };
  const handleReset = () => {
    queryForm.resetFields();
  };
  const handleAdd = () => {
    setVisible(true);
  };
  const columns = [
    {
      title: "用户id",
      dataIndex: "userId",
      fixed: "left",
    },
    {
      title: "用户名",
      dataIndex: "username",
    },
    {
      title: "状态",
      dataIndex: "status",
      render: (_, item) => {
        return (
          <span
            className={item.status === 0 ? "text-red-500" : "text-green-500"}
          >
            {item.status === 0 ? "禁用" : "启用"}
          </span>
        );
      },
    },
    {
      title: "角色",
      dataIndex: "role",
    },
    {
      title: "操作",
      fixed: "right",
      render: (_: any, item) => (
        <div className="flex justify-center items-center gap-2 text-blue-500">
          <span onClick={() => handleDelete(item)}>删除</span>
          <span onClick={() => handleDetial(item, "edit")}>禁用</span>
          <span onClick={() => handleDetial(item, "edit")}>修改密码</span>
          <span onClick={() => handleDetial(item, "edit")}>修改角色</span>
        </div>
      ),
    },
  ];
  return (
    <div>
      <Card>
        <div className="flex">
          <Form form={queryForm} onSubmit={handleSubmitQuery}>
            <Row gutter={24} justify="start">
              <Col span={8}>
                <Form.Item label="用户名" field="username">
                  <Input placeholder="请输入用户名"/>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="用户状态" field="status">
                  <Select placeholder="请选择用户状态" options={[{label: "启用", value: 1}, {label: "禁用", value: 0}]} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="用户角色" field="role">
                  <Select placeholder="请选择用户角色" options={[{label: "管理员", value: 1}, {label: "普通用户", value: 0}]} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          
          <Space
            direction={"vertical"}
            className={"flex justify-center pl-5 mr-5"}
          >
            <Button
              loading={loading}
              type="primary"
              icon={<IconSearch />}
              onClick={handleSubmitQuery}
            >
              查询
            </Button>
            <Button
              loading={loading}
              type="primary"
              icon={<IconRefresh />}
              onClick={handleReset}
            >
              重制
            </Button>
          </Space>
        </div>
      </Card>
      <Space />
      <Card>
        <Button
          type="primary"
          className="mb-2"
          icon={<IconPlus />}
          onClick={handleAdd}
        >
          添加用户
        </Button>
        <Table scroll={{ x: 1142 }} columns={columns} data={data} />
      </Card>
      <Modal
        title="添加用户"
        visible={visible}
        onCancel={() => {setVisible(false);addForm.resetFields()}}
        onOk={handleSubmitAdd}
        maskClosable={false}
      >
        <Form form={addForm} onSubmit={handleSubmitAdd}>
          <Form.Item
            label="用户名"
            field="username"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input prefix={<IconUser />} style={{ width: "250px" }} placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            label="密码"
            field="password"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password style={{ width: "250px" }} placeholder="请输入密码" />
          </Form.Item>
          <Form.Item
            label="用户角色"
            field="role"
            rules={[{ required: true, message: "请选择用户角色" }]}
          >
            <Select style={{ width: "250px" }} placeholder="请选择用户角色" options={[{label: "管理员", value: 1}, {label: "普通用户", value: 0}]}/>
          </Form.Item>
          <Form.Item
            label="用户状态"
            field="status"
            rules={[{ required: true, message: "请选择用户状态" }]}
          >
            <Select style={{ width: "250px" }} placeholder="请选择用户状态" options={[{label: "启用", value: 1}, {label: "禁用", value: 0}]}/>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
